<template>
  <div class="points-management">
    <h2>积分商城管理</h2>
    
    <div class="toolbar">
      <div class="search-filter">
        <input 
          type="text" 
          v-model="searchQuery" 
          class="admin-form-input" 
          placeholder="搜索商品名称..."
        />
        <select v-model="statusFilter" class="admin-form-input">
          <option value="all">所有状态</option>
          <option value="active">上架中</option>
          <option value="inactive">已下架</option>
        </select>
      </div>
      <div class="actions">
        <router-link to="/admin/points/new" class="admin-btn admin-btn-primary">
          添加商品
        </router-link>
      </div>
    </div>

    <div class="table-container">
      <table class="admin-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>商品名称</th>
            <th>分类</th>
            <th>积分价格</th>
            <th>库存</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="product in filteredProducts" :key="product.id">
            <td>{{ product.id }}</td>
            <td>{{ product.name }}</td>
            <td>{{ getCategoryName(product.category) }}</td>
            <td>{{ product.points }}</td>
            <td>{{ product.stock === -1 ? '无限' : product.stock }}</td>
            <td>
              <span :class="getStatusClass(product.status)">
                {{ getStatusName(product.status) }}
              </span>
            </td>
            <td class="actions-cell">
              <router-link :to="`/admin/points/${product.id}`" class="action-btn">
                编辑
              </router-link>
              <button class="action-btn" @click="toggleProductStatus(product)">
                {{ product.status === 'active' ? '下架' : '上架' }}
              </button>
            </td>
          </tr>
          <tr v-if="filteredProducts.length === 0">
            <td colspan="7" class="empty-data">没有找到商品</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminPoints',
  data() {
    return {
      products: [
        {
          id: 1,
          name: '环保竹吸管套装',
          category: 'physical',
          points: 500,
          stock: 100,
          status: 'active'
        },
        {
          id: 2,
          name: '10元咖啡店优惠券',
          category: 'voucher',
          points: 200,
          stock: 500,
          status: 'active'
        },
        {
          id: 3,
          name: '碳中和项目捐赠',
          category: 'donation',
          points: 1000,
          stock: -1,
          status: 'active'
        },
        {
          id: 4,
          name: '环保主题电子书',
          category: 'digital',
          points: 300,
          stock: -1,
          status: 'inactive'
        }
      ],
      searchQuery: '',
      statusFilter: 'all'
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        // 搜索过滤
        const matchesSearch = 
          product.name.toLowerCase().includes(this.searchQuery.toLowerCase());
        
        // 状态过滤
        const matchesStatus = this.statusFilter === 'all' || product.status === this.statusFilter;
        
        return matchesSearch && matchesStatus;
      });
    }
  },
  methods: {
    getCategoryName(category) {
      const categoryMap = {
        'digital': '数字商品',
        'physical': '实物商品',
        'voucher': '优惠券',
        'donation': '公益捐赠'
      };
      return categoryMap[category] || '未知分类';
    },
    getStatusName(status) {
      const statusMap = {
        'active': '上架中',
        'inactive': '已下架',
        'soldout': '已售罄'
      };
      return statusMap[status] || '未知状态';
    },
    getStatusClass(status) {
      const classMap = {
        'active': 'admin-tag admin-tag-green',
        'inactive': 'admin-tag admin-tag-orange',
        'soldout': 'admin-tag admin-tag-red'
      };
      return classMap[status] || 'admin-tag';
    },
    toggleProductStatus(product) {
      if (product.status === 'active') {
        product.status = 'inactive';
      } else {
        // 如果有库存，则可以上架
        if (product.stock > 0 || product.stock === -1) {
          product.status = 'active';
        } else {
          alert('该商品库存为0，无法上架');
        }
      }
    }
  }
}
</script>

<style scoped>
.points-management {
  width: 100%;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 10px;
}

.search-filter {
  display: flex;
  gap: 10px;
  flex: 1;
}

.actions {
  display: flex;
  gap: 10px;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  background-color: transparent;
  color: #1890ff;
  border: none;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: rgba(24, 144, 255, 0.1);
}

.empty-data {
  text-align: center;
  padding: 30px 0;
  color: #999;
}
</style> 